import React, { memo } from "react";
import { Pagination, PaginationProps } from 'antd';
import { createStyles } from "antd-style";
import { ITheme } from "../typing";

interface FooterProps extends PaginationProps {
  height: number;
  theme: ITheme;
  setPagination: (params: { current: number; pageSize: number; }) => void;
}

const Footer: React.FC<FooterProps> = ({ height, theme, setPagination, ...paginationProps }) => {
  const { styles } = useStyle({height,theme});

  return (
    <div className={styles.footer}>
      <Pagination
        showSizeChanger={true}
        showQuickJumper={true}
        onChange={(page, pageSize) => {
          setPagination({ current: page, pageSize });
        }}
        {...paginationProps}
      />
    </div>
  )
}

export default memo(Footer);


const useStyle = createStyles(({ css }, { height, theme }: { height: number, theme: ITheme }) => ({
  footer: css`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: ${height}px;
    background-color: ${theme.footerBgColor};
    box-shadow:${theme.footerBoxShadow};
  `,
}))
